<template>
    <div class="godosinfo-container">
        <!-- 要实现动画的小球 -->
        <!-- 钩子函数动画，这些钩子函数，都是通过事件绑定机制，绑定到transtion元素 上 -->
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        >
            <div class="ball" v-show="flag"></div>
        </transition>
       

       <!-- 轮播图区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotu="lunbotu" :imgname="'src'"></swiper>
					</div>
				</div>
		</div>
       <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="p">
                            市场价：
                            <span style="margin-right:10px"><del>￥{{goodsinfo.market_price}}</del></span>
                            销售价
                            <span style="font-size:16px;color:red;font-weight:bold;">{{goodsinfo.sell_price}}</span>

                        </p>
                        <p>
                            <!-- 这里的max是库存量 -->
                            购买数量：<nobox :max="goodsinfo.stock_quantity" @func="getSelectedCount"></nobox>
                        </p>
                        <div>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>

                        </div>
					</div>
				</div>
		</div>

       <!-- 商品参数区域 -->

        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsinfo.goods_no}}</p>
						<p>库存情况：{{goodsinfo.stock_quantity}}件</p>
						<p>上架时间：{{goodsinfo.add_time |dateFormat }}</p>
					</div>
				</div>
				<div class="mui-card-footer btnarea">
                    <!-- 使用编程时导航 -->
                    <mt-button type="primary" size="large" plain @click="goDesc">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain @click="goComment">商品评论</mt-button>
                </div>
		</div>
    </div>
</template>

<script>
//导入自己封装的轮播图组件
import swiper from '../subcomponents/Swiper.vue'
import nobox from '../subcomponents/goodsinfo_nobox.vue'
import {mapMutations} from "vuex"
    export default {
        data(){
            return {
                lunbotu:[],//商品的轮播图
                goodsinfo:{}, //商品的详情
                flag:false, //小球的显示与隐藏状态
                selectedCount:1 //用户选找的商品的购买数量 默认选择了一个商品

            };
        },
        created(){
            this.getlunbotu()
            this.getGoodsInfoById()
        },
        

        methods:{
            ...mapMutations(['addToCar']), //映射mapMutations的方法
            //获取轮播图的方法
           async getlunbotu(){
              const {data}  = await this.$http.get('api/getthumimages/'+this.id)
              if(data.status ===0) return (this.lunbotu = data.message)

            },
            async getGoodsInfoById(){
                // 根据id获取商品的详情参数
                const {data} = await this.$http.get('api/goods/getinfo/'+ this.id);
                if(data.status ===0) return this.goodsinfo = data.message[0]
            },
            goDesc(){
                //点击按钮，跳转到商品的描述页面
                this.$router.push('/home/goodsdesc/'+this.goodsinfo.id)
            },
            goComment(){
                //点击跳转评论页面
                this.$router.push('/home/goodscomment/'+this.goodsinfo.id)
            },
            addToCart(){
                //点击添加购物车
                this.flag =!this.flag
                //调用mutations中的addToCar
                // this.$store.commit("addToCar",{
                //     id:this.id,
                //     count:this.selectedCount
                // });
                //直接调用mapmutaions映射出来的方法
                this.addToCar({id:this.id,count:this.selectedCount,selected:true,
                price:this.goodsinfo.sell_price})


            },
            beforeEnter(el){
                // 动画开始之前，设置小球的起始状态  el元素，要动画的小球
                el.style.transform = "translate(0,0)"
            },
            enter(el,done){
                // 入场动画结束之后， 小球的终止状态 done就是下面afterenter的引用
                //transform  变换
                //translate  位移
                //transition 过渡效果
                el.offsetWidth

                //动态获取小球的横纵坐标

                //设置小球的入场动画终止状态
                el.style.transform = "translate(56px,159px)"
                //设置小球的过渡效果
                // 贝塞尔曲线在线生成器https://cubic-bezier.com/#.64,-0.09,.99,.49
                el.style.transition="all .5s cubic-bezier(.64,-0.09,.99,.49)"
                //当入场动画完成之后，需要手动调用一下done回调函数 直接跳过小球的出场动画
                done();
            },
            afterEnter(el){
                // 入场动画完成之后的回调函数
                this.flag = !this.flag
            },
            getSelectedCount(c){
                // 获取选找的商品的数量
                console.log('父组件的值', c)
                // 把用户选择的最新的树林中，保存到dta中，方便用户点击加入购物车 数量值同步徽标中
                this.selectedCount = c

            }
        },
        props:['id'],
        components:{
            //注册子组件
            swiper,
            nobox
        }
    }
</script>

<style lang="scss" scoped>
.godosinfo-container{
    background-color: #eee;
    overflow: hidden;
    .btnarea{
        // 纵向
        flex-direction: column;
        // 选择后面的button
        button + button{
            margin-top: 15px;
        }
    }

    .ball{
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        // 不影响标准流 让小球脱离标准流
        position: absolute;
        z-index: 99;
        left:147px;
        top:408px;
        //将来小球要通过动画位移到的位置
        // transform: translate(56px,159px);

    }
}
</style>